<template>
    <div class="goodslist">
        <myheader title="商品列表"></myheader>
       <div class="goods-wrap">
           <div class="goods-item" v-for="item in goodslist" :key="item.id" @click="goToGoodsinfo(item.id)">
               <img :src="item.img_url" alt="图片呢？跑丢了？">
               <div class="title">
                   <h4>{{item.title}}</h4>
                   <p class="subtitle">{{item.zhaiyao}}</p>
               </div>
               <div class="price">
                   <span class="card1">50天历史最低价</span>
                   <p class="goods-price">
                       <span class="new">{{item.sell_price | priceFormat}}</span>
                       <del class="old">{{item.market_price | priceFormat}}</del>
                   </p>
                   <p class="goods-hot">
                       <span class="hot">热卖中</span>
                       <span class="residue">剩余：{{item.stock_quantity}}件</span>
                   </p>
               </div>
           </div>
           <mt-button plain size="large" type="primary" @click="getMoreGoods">加载更多</mt-button>
       </div>
    </div>
</template>

<script>
    import myheader from '../../components/Header'
    export default {
        name: "goodslist",
        components:{
            myheader
        },
        data(){
            return{
                pageindex:1,
                goodslist:[]
            }
        },
        methods:{
            getGoodslist(){ //申请商品列表数据方法
                this.$http.get('api/getgoods?pageindex='+this.pageindex).then(res=>{
                  this.goodslist = this.goodslist.concat( res.body.message)
                },err=>{

                })
            },
            getMoreGoods(){ //加载跟多商品
                this.pageindex ++;
                this. getGoodslist()
            },
            goToGoodsinfo(goodsid){ //使用编程式导航跳转到商品详情页,如果想在跳转的同时，动态传参，不能使用path
                this.$router.push({name:'info',params:{id:goodsid}})
            }
        },
        created(){
            this. getGoodslist()
        }
    }
</script>

<style scoped lang="scss">
.goods-wrap{
    padding: 0 4px 55px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .goods-item{
        width: 49%;
        height: 380px;
        /*border: 1px solid #000;*/
        margin-top: 6px;
        box-shadow: 0 0 6px rgba(0,0,0,.3);
        padding: 6px;
        position: relative;
        img{
            display: block;
            margin: auto;
            width: 80%;
        }
        .title{
            h4{
                font-size: 15px;
                font-weight: 200;
                color: #333333;
                line-height: 20px;
            }
            .subtitle{
                color: red;
                font-size: 10px;
            }
        }
        .price{
                height: 118px;
                margin-top: 15px;
                border-top: 1px solid #eee;
                padding-top: 10px;
                position: absolute;
                width: 100%;
                bottom: 0;

            .card1{
                padding: 6px;
                background-color: #e3e3e3;
                font-size: 12px;
                border-radius: 3px;

            }
            .goods-price{
                margin: 10px 0;
                .new{
                    color: red;
                    font-size: 18px;
                }
                del{
                    margin-left: 25px;
                }
            }
            .goods-hot{
                margin: 10px 0;
                display: flex;
                justify-content: space-between;
                .hot{
                    padding: 1px  8px;
                    border-radius: 5px;
                    color: red;
                    border: 2px solid red;
                }
                .residue{
                    line-height: 25px;
                    margin-right: 8px;
                }
            }

        }
    }
}
</style>
